<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>晚点名填报</title>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>晚报情况</h1>
    </div>

    <div data-role="main" class="ui-content">
        <form method="post" onsubmit="return check()" action="/night/create" th:object="${nightInfo}">
            <div class="ui-field-contain">
                <div class="ui-field-contain">
                    <label for="day">姓名：</label>
                    <select name="day" id="day" data-native-menu="false" th:field="*{name}">
                        <option th:each="member:${members}" th:text="${member.studentName}" th:value="${member.studentName}"></option>


                    </select>
                </div>
                <div class="ui-field-contain">
                    <fieldset data-role="controlgroup">
                        <legend>是否在寝室：</legend>
                        <label for="yes">是</label>
                        <input type="radio" name="isSushe" id="yes" th:value="是" th:field="*{isSushe}" >
                        <label for="no">否</label>
                        <input type="radio" name="isSushe" id="no" th:value="否" th:field="*{isSushe}">
                    </fieldset>
                </div>
                <div class="ui-field-contain">
                    <fieldset data-role="controlgroup">
                        <legend>身体情况：</legend>
                        <label for="safe">无</label>
                        <input type="radio" name="physics" id="safe" th:value="无" th:field="*{physics}" >
                        <label for="other">其他情况</label>
                        <input type="radio" name="physics" id="other" th:value="其他情况" th:field="*{physics}">
                    </fieldset>
                </div>
                <p class="error">
                    单选框都得选噢!
                </p>
                <div class="ui-field-contain">
                    <label for="info">特殊情况说明:</label>
                    <textarea name="addinfo" id="info" th:field="*{otherInfo}"></textarea>
                </div>
            </div>
            <div data-role="main" class="ui-content">
                <button type="submit" id="submit" class="ui-btn">提交</button>
            </div>
            <div data-role="main" class="ui-content">
                <p>
                    1. 晚报默认本人填写，请如实填报。若本人未申报却显示已填报，请及时与管理员联系。<br>
                    2. 在寝情况：若不在寝，请在特殊情况说明中进行说明。<br>
                    3. 身体情况：若身体出现发烧、感冒或与新冠肺炎相关的症状，请选“其他情况”并在特殊情况中说明。<br>
                    4. 晚报时间：19:00-23:00。
                </p>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        $('.error').hide();
    });

    function check() {
        var isSushe = $('input:radio[name="isSushe"]:checked').val();
        var physics = $('input:radio[name="physics"]:checked').val();
        if (!isSushe) {
            $('.error').show();
            return false;
        } else if( !physics) {
            $('.error').show();
            return false;
        } else {
            return true;
        }
    };
</script>
<style>
    .error {
        color: red;
    }
</style>
</html>